<template>
  <div>
    <div id="app">
      <router-view/>
    </div>
    <!-- 底部tab切换栏 -->
    <div style="height:1.1rem">
      <mt-tabbar v-model="selected" fixed class="footTab">
        <mt-tab-item id="index">
          <span class="iconfont" slot="icon">&#xe639;</span>
          首页
        </mt-tab-item>
        <mt-tab-item id="classroom">
          <span class="iconfont" slot="icon">&#xe635;</span>
          班级
        </mt-tab-item>
        <mt-tab-item id="found">
          <span class="iconfont" slot="icon">&#xe634;</span>
          发现
        </mt-tab-item>
        <mt-tab-item id="user">
          <span class="iconfont" slot="icon">&#xe633;</span>
          我的
        </mt-tab-item>
      </mt-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      selected: 'index'
    }
  },
  watch: {
    selected (val) {
      switch (val) {
        case 'index':
          this.$router.push('/')
          break
        case 'classroom':
          this.$router.push('/classroom')
          break
        case 'found':
          this.$router.push('/found')
          break
        case 'user':
          this.$router.push('/user')
          break
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.footTab >>> a
  color #cccccc
  background-color: #fff !important
.footTab
  background-image none
  background-color #ffffff
  .iconfont
    font-size 24px
</style>
